.product {
	flex: 1;
	margin: 5px;
	width: 100%;
	min-width: 280px;
	height: 350px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f5fbfd;
	position: relative;

	&:hover .info {
		opacity: 1;
	}

	.circle {
		width: 200px;
		height: 200px;
		border-radius: 50%;
		background-color: white;
		position: absolute;
	}

	img {
		height: 60%;
		z-index: 2;
		object-fit: cover;
	}

	.info {
		transition: all 0.2s ease;
		cursor: pointer;
		opacity: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		background-color: rgba(0, 0, 0, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: white;
		margin: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.5s ease;

		&:hover {
			background-color: #e9f5f5;
			transform: scale(1.1);
		}
	}
}
